<template>
  <div>
    <a-table
      :locale="{emptyText:'暂无数据'}"
      :columns="columns"
      :bordered="bordered"
      :loading="loading"
      :size="size"
      :dataSource="data">
      <span slot="tags" slot-scope="tags">
        <a-tag v-for="tag in tags" color="blue" :key="tag">{{tag}}</a-tag>
      </span>
      <span slot="action" slot-scope="text, record">
        <a @click="onViewClick(record.id)">详情</a>
        <a-divider type="vertical"/>
        <a @click="onEditClick(record.id)">修改</a>
        <a-divider type="vertical"/>
        <a @click="onDeleteClick(record.id)">删除</a>
      </span>
    </a-table>
  </div>
</template>

<script>
  import {Table, Tag, Divider, Icon} from 'ant-design-vue'

  export default {
    name: "NipTable",
    components: {
      ATable: Table,
      ATag: Tag,
      ADivider: Divider,
      AIcon: Icon
    },
    props: {
      data: {
        type: Array,
        default: []
      }, columns: {
        type: Array,
        default: []
      }, bordered: {
        type: Boolean,
        default: false
      }, loading: {
        type: Boolean,
        default: false
      }, size: {
        type: String,
        default: "default"
      }
    },
    methods: {
      onViewClick(id) {
        this.$emit('onView', id)
      },
      onEditClick(id) {
        this.$emit('onEdit', id)
      },
      onDeleteClick(id) {
        this.$emit('onDelete', id)
      },
    }
  }
</script>

<style scoped>

</style>
